<script setup lang="ts">


import {computed, ref} from "vue";
import type {typeUserAdvice, typeUserChat} from "@/store/dataType";

let searchWord = ref("")
type Props = {
  chatData: typeUserChat[]
}
let props = defineProps<Props>()

const filterTableData = computed(() =>
    props.chatData.filter(
        (data) =>
            !searchWord.value
            ||
            String(data.accountName)
                .toLowerCase()
                .includes(searchWord.value.toLowerCase())
            ||
            String(data.question)
                .toLowerCase()
                .includes(searchWord.value.toLowerCase())
            ||
            String(data.answer)
                .toLowerCase()
                .includes(searchWord.value.toLowerCase())

    )
)

function refreshSearch(){
  searchWord.value = ""
}

function showData(val, searchData) {
  // 不区分大小写  const Reg = new RegExp(searchData, 'i');
  // 全局替换  const Reg = new RegExp(searchData, 'g');
  const Reg = new RegExp(searchData, 'ig');
  if (val) {
    // 注意 这里推荐使用正则占位符$& 不使用${searchData}  因为当这里使用正则表达式（i）不区分大小写时，如果你的文本是大写，搜索的关键字是小写，匹配结果会替换掉大写的文本
    // const res = val.replace(Reg, `<span style="background-color: yellow;">${searchData}</span>`);
    const res = val.replace(Reg, `<span style="background-color: #26b37f; color:white">$&</span>`);
    return res;
  }
}


let pagination = ref({
  currentPage: 1, // 当前页
  pageSize: 10, // 每页显示条数
  total: props.chatData.length, // 总条数
  layout: 'total,sizes,prev, pager, next, jumper', // 分页布局
})

function handleSizeChange(val) {
  pagination.value.pageSize = val;
}
// 跳到当前页
function handleCurrentChange(val) {
  pagination.value.currentPage = val;
}



//这里会存在问题：
//tableData需要提前获取，然后才可以filterTableData实现成功
//那么提前获取可以采取的方法有：
// 路由传参（传一个data对象，里面有键值对（chatData:chatData.value),就可以使用route.query。chatData来进行调用
// 父组件（receiveFeedbackPage页）向子组件（当前页：receiveFeedback）传参=》但这个方法会导致页面跳转时进行页面刷新，然后这个时候再点击其他页面的跳转，就会发生此问题：路由网址发生变化，凡是界面组件没有发生刷新。
//在点击 进入tableData页的那个 组件所在位置 进行数据读取，然后本地化存储。这样子当前页：receiveFeedback 就可以直接获取数据。

//方法一三都存在一个问题：就是无法一下子存储大量数据。router能存储的<localStorage
//解决方案：先获取一批data，然后跳转进入receiveFeedback时，获取下一批data。那么就可以在data页点击下一页时，完成filter的更新。
//但这样子搞，filter就不是全文检索的了，这个有点问题（可能filter就是适用于前端少量数据的时候吧）。如果是大量数据的话，那这个查找，肯定是要通过调用后端接口来实现的。

</script>

<template>
  <div class="flex flex-col justify-center items-center">
    <div class="flex justify-start items-center w-full gap-2">
      <div class="w-60% ">
        <el-input placeholder="输入用户名/问题/回答的关键字进行查找" v-model="searchWord" class="h-10 my-3" >
          <template #prepend>搜索</template>
        </el-input>
      </div>
      <button class="h-9 w-20 bg-#26b37f hover:bg-green-7 rounded-1 text-white" @click="refreshSearch">重置</button>
    </div>
    <el-table
        :data="filterTableData.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)"
        style="width: 99.9%"
        max-height="550"
    >
      <el-table-column type="index" width="80" align="center">
        <template #default="scope">
          {{ scope.$index + (pagination.currentPage - 1) * pagination.pageSize + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="accountName" label="用户名" width="150">
        <template #default="scope">
          <span  v-html="showData(scope.row.accountName, searchWord)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="提问" width="400" >
        <template #default="scope">
          <el-scrollbar max-height="120" class="pr-2">
            <span  v-html="showData(scope.row.question, searchWord)"></span>
          </el-scrollbar>
        </template>
      </el-table-column>
      <el-table-column prop="answer" label="回答" width="400" >
        <template #default="scope">
          <el-scrollbar max-height="120" class="pr-2">
            <span  v-html="showData(scope.row.answer, searchWord)"></span>
          </el-scrollbar>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提问时间" width="220"/>
    </el-table>
    <!--    <el-pagination background layout="prev, pager, next" :total="1000" class="mt-2" />-->
    <el-pagination
        class="mt-2"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
  </div>
</template>

<style scoped>

</style>